<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>款项明细</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	
<div id="doumee">

	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">款项明细</h4>
		<a class="right_icon help_icon" @click="show = !show"></a>
	</header>
	
	<div class="moneyNav">
		<h5 class="dm-title">款项明细截至查询日期：2018-11-15</h5>
		<ul class="nav bg-w h5 tc bottom-line main-line flex-row">
			<li :class="index == nav ? 'on flex-full animate' : 'flex-full animate'" v-for="(item,index) in navName" @click="navTab(index)">{{item}}</li>
		</ul>
	</div>
	
	<div class="swiper-container Main" id="Main" style="top: 128px;">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="menuMoneyDtl">
					
					<div class="selMod bg-w">
						<ul class="btn-box bottom-line">
							<li :class="selType == 0 ? 'on animate' : 'animate'" @click="selTab(0)">月份</li>
							<li :class="selType == 1 ? 'on animate' : 'animate'" @click="selTab(1)">年份</li>
						</ul>
						<div class="dm-title">实际可用余额：￥10000.00</div>
					</div>
					<div class="moneyModWrap">
						<ul class="box">
							<li class="dm-title top-line">2018年10月</li>
							<li class="list top-line">
								<ol class="sub flex-row" data-type='0'>
									<li class="type h4 flex-full">汇入</li>
									<li class="oth tr h5">
										<div class="time">2018-10-01</div>
										<div class="val">+1000.00</div>
									</li>
								</ol>
							</li>
							<li class="list top-line">
								<h5 class="sub-bt bottom-line">订单编号：2018031546546</h5>
								<ol class="sub flex-row" data-type='1'>
									<li class="type h4 flex-full">订单</li>
									<li class="oth tr">
										<div class="time h6">2018-10-01</div>
										<div class="val h4">-1000.00</div>
									</li>
								</ol>
							</li>
							<li class="list top-line">
								<h5 class="sub-bt bottom-line">订单编号：2018031546546</h5>
								<ol class="sub flex-row" data-type='2'>
									<li class="type h4 flex-full">其他</li>
									<li class="oth tr h5">
										<div class="time">2018-10-01</div>
										<div class="val">-1000.00</div>
									</li>
								</ol>
							</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年09月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年08月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年07月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年06月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年05月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年04月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年03月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年02月</li>
						</ul>
						
						<ul class="box">
							<li class="dm-title top-line">2018年01月</li>
						</ul>
						
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
	
	<div id="helpMask" v-show="show">
		<div class="dm-mask"></div>
		<div class="helpMod">
			<h4 class="bt tc">温馨提示</h4>
			<h5>
				实际可用余额=账面实时余额+信用额度<br /><br />
				账面实时余额为加盟商在志邦账户的最新余额<br /><br />
				实际可用余额为下单的余额<br /><br />
				信用额度为公司借款或即将到账返利及各项政策补贴
			</h5>
			<button class="submitBtn" @click="show = !show" type="button">确定</button>
		</div>
	</div>
	
</div>

<script type="text/javascript">

var vm = new Vue({
	el:"#doumee",
	data:{
		nav:0,
		navName:['志邦橱柜','法兰菲全屋','志邦木门'],
		selType:0,
		show:false
	},
	methods:{
		//切换品牌
		navTab:function(index){
			this.nav = index;
			this.swiper.setWrapperTranslate(0);
		},
		//切换月份/年份
		selTab:function(type){
			this.selType = type;
			this.swiper.setWrapperTranslate(0);
		},
		//刷新
		refresh:function(pull){
			pull.innerText = '刷新成功';
		},
		//加载
		reload:function(pull){
			pull.innerText = '已加载全部数据';
		},
	},
	mounted:function(){
		var that = this;
		that.swiper = pullSwiper('#Main',{
			up:that.refresh,
			down:that.reload
		});
	}
});

</script>

</body>
</html>
